<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>邮政银行题库</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        box-sizing: border-box;
      }
      html,
      body,
      #app {
        height: 100%;
      }
      body {
        background: #ededec;
        -webkit-tap-highlight-color: transparent;
      }
      li {
        list-style: none;
        display: flex;
        border: 1px solid transparent;
        border-radius: 4px;
      }
      li.checked {
        border: 1px solid #d1edc4;
        background: #f0f9eb;
      }
      .panel {
        border-radius: 10px;
        background: #fff;
        font-size: 18px;
        height: calc(100% - 160px);
        overflow: scroll;
      }

      .panel-operate {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        padding-top: 20px;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .flag {
        color: #409eff;
      }

      .num {
        border: 1px solid #666;
        border-radius: 3px;
        width: 120px;
        height: 40px;
        font-size: 16px;
        vertical-align: top;
      }
      .num:focus {
        border: 1px solid #409eff;
      }

      button {
        width: 100px;
        height: 40px;
        font-size: 16px;
        color: #fff;
        border-radius: 20px;
      }
      .btn-brand {
        background: #409eff;
      }
      .btn-brand:active {
        background: #337ecc;
      }
      .btn-success {
        background: #67c23a;
      }
      .btn-success:active {
        background: #529b2e;
      }
      .ml-10 {
        margin-left: 10px;
      }
      .mr-10 {
        margin-right: 10px;
      }
      .mt-10 {
        margin-top: 10px;
      }
      .mb-10 {
        margin-bottom: 10px;
      }
      .ml-20 {
        margin-left: 20px;
      }
      .mb-20 {
        margin-bottom: 20px;
      }
      .mt-20 {
        margin-top: 20px;
      }
      .pd-10 {
        padding: 10px;
      }
      .pl-10 {
        padding-left: 10px;
      }
      .pr-10 {
        padding-right: 10px;
      }
      .pt-10 {
        padding-top: 10px;
      }
      .pb-10 {
        padding-bottom: 10px;
      }
      .c-333 {
        color: #333;
      }
      .fw-500 {
        font-weight: 500;
      }
    </style>
    <script>
      if (location.host === 'caohenghu.gitee.io') {
        var _hmt = _hmt || []
        ;(function () {
          var hm = document.createElement('script')
          hm.src = 'https://hm.baidu.com/hm.js?0e67d89f634876bb5b99ab5053b159ae'
          var s = document.getElementsByTagName('script')[0]
          s.parentNode.insertBefore(hm, s)
        })()
      }
    </script>
  </head>

  <body>
    <div id="app" class="pd-10">
      <div class="panel pd-10" ref="scroll">
        <template v-if="isReady">
          <div class="fw-500">
            <span class="flag">【{{isMulti ? '多选题' : '单选题'}}】</span>{{num
            + 1}}、{{title}}
          </div>
          <ul class="mt-20 c-333">
            <li
              class="mt-10"
              :class="{checked: answerSelected.includes(item.option)}"
              @click="selectAnswer(item.option)"
              v-for="item of options"
            >
              <span>{{item.option}}、</span>
              <span>{{item.desc}}</span>
            </li>
            <li class="mt-20 fw-500">已选择：{{answerSelected}}</li>
            <li class="fw-500" v-show="isShowAnswer">答案：{{answer}}</li>
          </ul>
        </template>
      </div>
      <div class="panel-operate pl-10 pr-10">
        <div class="mb-20">
          <button class="btn-brand" @click="pre">上一题</button>
          <button class="btn-success ml-20" @click="showAnswer">提交</button>
          <button class="btn-brand ml-20" @click="next">下一题</button>
        </div>
        <div>
          <span>跳到第</span>
          <input
            class="num ml-10 mr-10 pl-10 pr-10"
            type="tel"
            placeholder="请输入题号"
            v-model="newNum"
            @keyup.enter="jump"
          />
          <span>题</span>
          <button class="btn-brand ml-20" @click="jump">确定</button>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
    <script setup>
      const { createApp } = Vue
      createApp({
        data() {
          return {
            questions: [],
            num: 0,
            newNum: '',
            title: '',
            options: [],
            answerSelectedObj: {},
            answer: '',
            isShowAnswer: false,
            isReady: false
          }
        },
        computed: {
          isMulti() {
            return this.answer.length > 1
          },
          answerSelected() {
            return Object.keys(this.answerSelectedObj).sort().join('')
          }
        },
        created() {
          fetch('./db.json')
            .then(res => {
              if (res.status === 200) {
                return res.json()
              }
            })
            .then(res => {
              this.questions = res
              this.showQuestion(0)
              this.isReady = true
              document.addEventListener('touchstart', () => {})
            })
        },
        methods: {
          showQuestion(num) {
            const obj = this.questions[num]
            this.title = obj['题干']
            this.options = []
            ;['A', 'B', 'C', 'D', 'E', 'F', 'G'].forEach(option => {
              let desc = obj[`选项${option}`]
              if (desc) {
                desc = String(desc)
                desc = desc.trim()
                if (desc.startsWith(option)) {
                  desc = desc.replace(option, '').trim()
                }
                if (desc.startsWith('、')) {
                  desc = desc.replace('、', '').trim()
                }
                if (desc.startsWith('.')) {
                  desc = desc.replace('.', '').trim()
                }
                this.options.push({ option, desc })
              }
            })
            this.answer = obj['答案']
            this.isShowAnswer = false
            this.answerSelectedObj = {}
          },
          pre() {
            if (this.num <= 0) return
            this.showQuestion(--this.num)
          },
          next() {
            if (this.num >= this.questions.length - 1) return
            this.showQuestion(++this.num)
          },
          showAnswer() {
            this.isShowAnswer = true
            setTimeout(() => {
              const $scroll = this.$refs.scroll
              $scroll.scrollTop = $scroll.scrollHeight
            })
          },
          jump() {
            if (
              this.newNum > this.questions.length ||
              !/^[1-9]\d*$/.test(this.newNum) // 正整数
            ) {
              alert('请输入有效的题号')
              this.newNum = ''
              return
            }
            this.num = this.newNum - 1
            this.showQuestion(this.num)
            this.newNum = ''
          },
          selectAnswer(type) {
            if (this.isMulti) {
              if (this.answerSelectedObj[type]) {
                delete this.answerSelectedObj[type]
              } else {
                this.answerSelectedObj[type] = 1
              }
            } else {
              this.answerSelectedObj = {}
              this.answerSelectedObj[type] = 1
            }
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
